<script setup lang="ts">
import post from "@/lib/post.ts";
import * as echarts from "echarts"; // 引入echarts
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

const option = ref(null); // 柱状图

const getRoleStatics = async () => {
  const data = await post("/statics/member", {
    pipeline: [
      // { lookup: "roleId" },
      // { project: "roleName:mo.at($role.name)" },
      { groupKey: "name" },
    ],
  });
  if (!data.success) {
    return ElMessageBox.alert(data.message);
  }
  const list = data.result.list;
  const values = list.map((o) => o.value);
  const labels = list.map((o) => o.label);
  option.value = {
    xAxis: {
      type: "category",
      data: labels,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: values,
        type: "bar",
        barWidth: 20, // 宽度

        itemStyle: {
          borderRadius: [10, 10, 0, 0],  // 设置圆角
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // 颜色渐变颜色
            {
              offset: 0,
              color: "red",
            },
            {
              offset: 1,
              color: "orange",
            },
          ]),
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
};
getRoleStatics();
</script>

<template>
  <v-chart :option="option" />
</template>